<!-- 账单详情 -->
<template>
	<view class="bg-white">
		<action-bar title="账单"></action-bar>
		<view class="year-options">
			<picker mode="date" fields="year" @change="yearChange" :start="selectYearMinRange" :end="selectYearMaxRange">
				{{selectYear}}年
				<text class="cuIcon cuIcon-unfold"></text>
			</picker>
		</view>
		<view class="bg-cyan">
			<view class="bill-content flex flex-direction justify-center align-center">
				<view>
					<text class="text-sm">结余</text>
				</view>
				<view>
					<text class="text-price text-xxl margin-tb-sm" v-text="total.income - total.outcome"></text>
				</view>
			</view>
			<view class="detail-content flex justify-around">
				<view>
					收入 <text class="text-price text-xl" v-text="total.income"></text>
				</view>
				<view>|</view>
				<view>
					支出 <text class="text-price text-xl" v-text="total.outcome"></text>
				</view>
			</view>
		</view>
		<view class="cu-list menu sm-border">
			<view class="cu-item" style="min-height: 70rpx !important;padding-right: 90rpx;">
				<view>月份</view>
				<view>收入</view>
				<view>支出</view>
				<view>结余</view>
			</view>
			<view v-for="(item, index) in billList" class="cu-item arrow" @click="turn_to_month_total_page(item.month)">
				<view v-text="Number(item.month) + '月'"></view>
				<view v-text="item.income"></view>
				<view v-text="item.outcome"></view>
				<view v-text="item.income || 0 - item.outcome || 0" :ontouch="true"></view>
			</view>
		</view>
		<view>
			<qiun-data-charts class="charts-rotate" :ontouch="true" type="column" :opts="opts" :chartData="chartData" />
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			this.book_id = option.bookId
			
			let now = new Date()
			this.selectYearMaxRange = now.getFullYear()
			this.selectYear = now.getFullYear()
			
			this.getBillingList()
		},
		data() {
			return {
				book_id: null,
				selectYear: null,
				selectYearMinRange: '2020',  // 日期最小选择
				selectYearMaxRange: '',
				total: {
					income: 0,
					outcome: 0
				},
				billList: [],
				opts: {
					color: ["#91CB74", "#EE6666"],
					padding: [15,10,0,15],
					enableScroll: true,
					legend: {},
					xAxis: {
					    disableGrid: true,
					    scrollShow: true,
					    itemCount: 4,
						min: 1,
						max: 12
					},
					yAxis: {
					    gridType: "dash",
					    dashLength: 2
					},
					extra: {
						show: true,
						padding: 5,
						lineHeight: 30,
						margin: 0,
					    line: {
							type: "straight",
							width: 2
						}
					}
				},
				chartData: {
					categories: [],
					series: [
						{
							name: "收入",
							data: []
						},
						{
							name: "支出",
							data: []
						}
					]
				}
			}
		},
		methods: {
			yearChange(e) {
				this.selectYear = e.detail.value
				this.getBillingList()
			},
			
			getBillingList() {
				this.$request({
					url: `/bill/list/${this.book_id}/${this.selectYear}`
				}).then(res => {
					if (res && res.data.code == 200) {
						this.billList = res.data.list
						
						let incomeTotal = 0
						let outcomeTotal = 0
						// 统计图
						const incomeList = []
						const outcomeList = []
						const titleList = []
						
						Object.values(res.data.list).forEach(item => {
							incomeTotal += item.income
							outcomeTotal += item.outcome
							
							incomeList.push(item.income)
							outcomeList.push(item.outcome)
							titleList.push(item.month + '月')
						})
						
						this.chartData.series[0].data = incomeList
						this.chartData.series[1].data = outcomeList
						this.chartData.categories = titleList
						
						this.total.income = incomeTotal
						this.total.outcome = outcomeTotal
					}
				})
			},
			
			turn_to_month_total_page(month) {
				month = Number(month)
				const bookId = this.book_id
				const date = this.selectYear + (month > 10 ? '': '0') + month
				
				uni.navigateTo({url: `./billing-month-page?bookId=${bookId}&date=${date}`})
			}
		}
	}
</script>

<style>
	
	.year-options{
		position: absolute;
		color: #fff;
		top: 145rpx;
		left: 30rpx;
	}
	
	.bill-content {
		width: 100vw;
		height: 200rpx;
	}
	
	.detail-content {
		width: 100vw;
		height: 100rpx;
	}
	
	.charts-rotate {
		width: 1100upx;
		height: 1000upx;
		background-color: #FFFFFF;
	}
</style>
